<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>
</head>
<body>
    <style>
        html,body{
            margin:0;
              height:100%;
              width:100%;
        }
        #rootDiv{
            height:300px;
            width:500px;
            background: lightcyan;
            overflow: auto;
        }
        #innerDiv{
            height:1000px;
            width:800px;
            background: lightseagreen;
        }
        #other{
            height:2000px;
            width:200px;
            background: red;
        }
    </style>
    <script src="./jquery-1.11.0.js"></script>
    <script>
        (function(){
             console.log = function(msg){
                 document.getElementById('rootDiv').innerHTML =  msg + "<br>"+ document.getElementById('rootDiv').innerHTML ;
             };
        })();

        function onClick(){
            console.log('js click');
        }
        $(function(){
           /* $('#rootDiv').on('touchstart',function(event){
                console.log('touchStart');
            });
            $('#rootDiv').on('touchmove',function(){
                event.preventDefault();
                console.log('touchMove');
            });
            $('#rootDiv').on('touchcancel',function(){
                console.log('touchCancel');
            });
            $('#rootDiv').on('touchend',function(){
                console.log('touchEnd');
            });*/
        });

    </script>
    <button onclick="(function(){location.href = location.href})();">refresh page</button>
    <div id="rootDiv">
         <div id="innerDiv">

         </div>
    </div>
    <div id="other">

    </div>
</body>
</html>